{extend name="base"}
{block name="main"}
<div id="app" v-cloak>
    <el-row class="ws-quote">
        <el-col :span="24" >
            <!-- <el-button type="primary" size="small" @click="href('{:url('admin/finance/index')}')">前往财务管理</el-button> -->
            <el-input placeholder="搜索关键词" v-model="params.keyword" size="small" style="width: 350px;" clearable>
                <el-select v-model="params.cate" slot="prepend" placeholder="请选择"style="width: 100px;">
                  <el-option label="所属用户" :value="1"></el-option>
                  <!-- <el-option label="来源用户" :value="2"></el-option>
                  <el-option label="订单号" :value="3"></el-option> -->
                </el-select>
            </el-input>
            <el-date-picker
                  v-model="params.range"
                  type="daterange"
                  align="right"
                  unlink-panels
                  value-format="timestamp"
                  size="small"
                  range-separator="至"
                  start-placeholder="记录时间"
                  end-placeholder="记录时间"
                  :picker-options="pickerOptions">
            </el-date-picker>
            <el-button type="primary" size="small" @click="search('{:url('')}')">搜索</el-button>
        </el-col>
    </el-row>


    <el-table
        :default-expand-all="false"
        border
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="ID"
          prop="id"
          :width="80"
          align="center">
        </el-table-column>
        <!-- <el-table-column
          label="所属用户"
          prop="user">
        </el-table-column> -->
        <el-table-column
          label="来源用户"
          prop="from">
        </el-table-column>
        <el-table-column
          label="关联订单"
          prop="order">
        </el-table-column>
        <el-table-column
          label="金额"
          prop="money">
        </el-table-column>
        <el-table-column
          label="说明"
          prop="remark">
        </el-table-column>
        <el-table-column
          label="记录时间"
          align="center"
          width="140px"
          prop="s_time"
          sortable
          :formatter="dateFormats">
        </el-table-column>
    </el-table>

    <div class="page">{$list->render()|raw}</div>

    
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
window.app=new Vue({
    el:"#app",
    mixins:[wsMixins],
    data:{
        tableData:{$list->toJson()|raw}, // 列表数据
        params:{$params|raw},
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
    },
    
    methods:{
        
        dateFormats:function(row, column, cellValue, index){
            return this.dateFormat(cellValue*1000,'Y-m-d H:i');
        },
    },
});
</script>
{/block}